<template> 
  <el-table border :data="tableData" style="width: 100%" max-height="500">
    <el-table-column v-for="(item,index) in columns" :key="index" v-bind="item">
      <template v-if="item.render" #default="scope">
        <columnRender :row="scope.row" :render="item.render" :index="scope.$index"/>
      </template>
    </el-table-column>
  </el-table>
  <footer>
    <el-pagination
      v-model:currentPage="paging.currentPage"
      v-model:page-size="paging.pageSize"
      :page-sizes="pageSizes"
      :disabled="false"
      background
      :layout="layout"
      :total="paging.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </footer>
  
</template>
<script setup>
import columnRender from './column-render'
import { reactive, ref, defineExpose } from 'vue'
const prop = defineProps({
  columns:{
    type:Array,
    default: () => {
      return [
        {prop:"address",label:"地址",},
        {prop:"render",label:"render",
          render:(h,row) => {
            console.log(row)
            return h('div',{style:{
              color:'red'
            }},row.name)
          }
        }
    ]
    }
  },
  ajax:{
    type:Object,
    default:() => {
      return {
        url:"https:www.baidu.com",
        param:{

        }
      }
    }
  },
  pageSizes:{
    type:Array,
    default: () => {
      return [10, 20, 30, 40]
    }
  },
  layout:{
    type:String,
    default:"total, sizes, prev, pager, next, jumper"
  }
})
const paging = reactive({
  currentPage:1,
  pageSize:10,
  total:100
})

const handleCurrentChange = (val) => {
  getTableList()
}

const handleSizeChange = (val) => {
  getTableList()
}

const tableData = ref([
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },

  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },
])
const getTableList = () => {
  console.log("执行查询接口")
  console.log(prop.ajax)
  console.log('====================================');
  console.log(paging);
  console.log('====================================');
}
// 主动暴露childMethod方法
defineExpose({ getTableList })
</script>
<style scoped>
footer{
  width: 100%;
  overflow: hidden;
    display: flex;
    margin-top: 24px;
    justify-content: flex-end;
}
</style>